<template>
  <table class="table-bordered" border="1">
    <tr>
      <td colspan="2" style="text-align: center">
        <h1>登录页面</h1>
      </td>
    </tr>
    <tr>
      <td>会员名称:</td>
      <td>
        <!-- v-model:双向綁定   -->
        <input type="text" v-model="info.username"  placeholder="请输入用户名"/>
      </td>
    </tr>
    <tr>
      <td>会员密码:</td>
      <td>
        <input type="password" v-model="info.userpwd"  placeholder="请输入密码"/>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="text-align: center">
        <input type="button" value="登录" @click="login"  class="btn btn-primary"/>
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";

const router = useRouter();
// 引入仓库
import {useMemberStore} from'../../stores/counter'
// 创建仓库实例
const mStore = useMemberStore()
// 通过$reset()完成数据清空
// mStore.$reset()
if (mStore.MemberId == "") {
  router.push("/LoginView");
}
const info = ref({
  username: "",
  userpwd: "",
});

const login = () => {
  axios
    .get("https://localhost:7071/api/Member/MemberLogin", {
      params: {
        // MLname: 从API传来的会员名称参数,
        MLname: info.value.username,
        // MLpwd: 从API传来的会员密码参数,
        MLpwd: info.value.userpwd,
      },
    })
    .then((res) => {
      if (res.data > 0) {
        alert("登录成功");
        location.href = "/showmeber";
        // 将登录成功后将会员名称保存Pinia仓库中
        mStore.MemberId = info.value.username
        alert(mStore.MemberId)
        
      } else {
        alert("登录失败");
      }
    })
    .catch((error) => {
      console.log(error);
    });
};
</script>

<style scoped>
</style>